<template>
  <div class="main">
    <img class="bg-img" src="@/assets/football/排行榜背景.jpg" alt="" />
    <div class="page-title">
      <div class="title">国足出征卡塔尔</div>
      <div class="button">
        <img class="jifen" src="@/assets/football/积分.png" alt="" /><span
          style="
            color: red;
            font-weight: bolder;
            font-size: 18px;
            margin-left: 5px;
            margin-right: 40px;
          "
          >{{ personTotalScore }}</span
        >
        <img
          class="dalishenbei"
          @click="clickScore()"
          src="@/assets/football/大力神杯.png"
          alt=""
        />
        <span class="total-btn" @click="clickScore()">总排行</span>
      </div>
    </div>

    <div class="race-card" v-if="raceList.length">
      <div
        :class="itemStatusFn(item, index)"
        v-for="(item, index) in raceList"
        :key="index"
      >
        <div class="dg-div">
          <img
            v-for="i in getdangao(item.score)"
            class="dangao"
            src="@/assets/football/蛋糕.png"
            alt=""
          />
        </div>
        <div class="race-order">
          <!-- <span>第{{index+1}}轮</span> -->
          <span class="race-time">{{ item.time }}</span>
        </div>

        <div class="country">
          <span
            :class="item.redTeam == '中国' ? 'hostTeam ourTeam' : 'guestTeam'"
            >{{ item.redTeam }}</span
          >
          <span class="flag result">
            <img class="host-img" :src="item.hostImg" alt />
            <span
              :class="
                item.redTeam == '中国' ? 'hostScore ourScore' : 'hostScore'
              "
              >{{ item.hostScore }}</span
            ><span style="margin: 0 5px">:</span>
            <!-- <img class="vs" src="@/assets/football/vs.png" alt=""> -->
            <span
              :class="
                item.blueTeam == '中国' ? 'guestScore ourScore' : 'guestScore'
              "
              >{{ item.guestScore }}</span
            >
            <img class="guest-img" :src="item.guestImg" alt />
          </span>
          <span
            :class="item.blueTeam == '中国' ? 'hostTeam ourTeam' : 'guestTeam'"
            >{{ item.blueTeam }}</span
          >
        </div>

        <span class="line"></span>
        <div class="predict-point">
          <!-- <span class="weight">主</span> -->
          <el-input
            :disabled="inputStatusFn(item, index)"
            class="hostPoint"
            size="small"
            v-model="item.projectedRedScore"
            maxlength="2"
            placeholder="-"
          ></el-input>
          <img class="vs" src="@/assets/football/vs.png" alt="" />
          <el-input
            :disabled="inputStatusFn(item, index)"
            class="guestPoint"
            size="small"
            maxlength="2"
            v-model="item.projectedBlueScore"
            placeholder="-"
          ></el-input>
          <!-- <span class="weight">客</span> -->
        </div>
        <span class="line"></span>

        <div class="comment">
          <span
            class="weight"
            @click="editTextFn(1, item.status, index, item.preMatchComments)"
            >{{
              item.preMatchComments && item.preMatchComments.length > 0
                ? "查看预言"
                : "赛前预言"
            }}</span
          >/
          <span
            class="weight"
            @click="editTextFn(2, item.status, index, item.postMatchComments)"
            >{{
              item.postMatchComments && item.postMatchComments.length > 0
                ? "查看点评"
                : "赛后点评"
            }}</span
          >
        </div>

        <span class="line"></span>
        <img
          class="message"
          src="@/assets/football/message.png"
          alt=""
          @click="btnShowMessage(item.matchId)"
        />
        <!-- <span class="line"></span> -->

        <!-- <div class="result">
          比赛结果
          <span
            :class="item.redTeam == '中国' ? 'hostScore ourScore' : 'hostScore'"
            >{{ item.hostScore }}</span
          >:
          <span
            :class="
              item.blueTeam == '中国' ? 'guestScore ourScore' : 'guestScore'
            "
            >{{ item.guestScore }}</span
          >
        </div> -->
        <span class="line"></span>
        <div class="score-div">
          <span class="weight">积分：</span>
          <span class="score">{{ item.score }}</span>
        </div>
      </div>
    </div>
    <div class="submit-btns">
      <el-tooltip content="提交预测" placement="top">
        <div class="football-icon" id="shake" @click="submitFn">
          <img src="../../../assets/football/足球.png" alt />
        </div>
      </el-tooltip>

      <!-- <el-button type="primary" @click="submitFn">提交预测</el-button> -->
    </div>
    <template v-if="raceList.length">
      <el-dialog
        title="赛前预测"
        :visible.sync="editPredictText"
        :before-close="(done) => cancleEidtTextFn(1, done)"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-input
          type="textarea"
          :disabled="raceList[currentEditIndex].status != -1"
          v-model="raceList[currentEditIndex].preMatchComments"
          :rows="4"
          placeholder="请输入您的赛前预测！胆子放大些！"
        ></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleEidtTextFn(1)">取 消</el-button>
          <el-button type="primary" @click="doEditTextFn(1)">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="赛后点评"
        :visible.sync="editCommentText"
        :before-close="(done) => cancleEidtTextFn(2, done)"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-input
          type="textarea"
          :disabled="raceList[currentEditIndex].status == 2"
          v-model="raceList[currentEditIndex].postMatchComments"
          :rows="4"
          placeholder="请输入您的赛后点评！胆子也放大些！"
        ></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleEidtTextFn(2)">取 消</el-button>
          <el-button type="primary" @click="doEditTextFn(2)">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <scoreboard ref="board"></scoreboard>
    <showmessage ref="showmessage"></showmessage>
  </div>
</template>
<script>
import { getRaceList, getRaceInfo, submitRaceInfo } from "@/api/football";
import scoreboard from "@/views/club/football/ScoreBoard";
import showmessage from "@/views/club/football/ShowMessage";
export default {
  data() {
    return {
      currentEditIndex: 0,
      currentEditContent: "",
      raceList: [
        // {
        //   time: '2021/09/02',
        //   redTeam: '澳大利亚',
        //   blueTeam: '中国',
        //   hostImg: require('../../../assets/football/澳大利亚.jpg'),
        //   guestImg: require('../../../assets/football/中国.jpg'),
        //   status: -1,
        //   overStatus: 0,
        //   projectedRedScore: null,
        //   projectedBlueScore: null,
        //   preMatchComments: '',
        //   postMatchComments: '',
        //   hostScore: '--',
        //   guestScore: '--',
        // },
      ],
      submitStatus: true,
      hostPoint: "",
      guestPoint: "",
      predictText: "",
      editPredictText: false,
      commentText: "",
      editCommentText: false,
      personTotalScore: 0,
      scoreVisiable: false,
    };
  },
  components: {
    scoreboard,
    showmessage,
  },
  mounted() {
    this.getRaceListFn();

    console.log(this.raceList);

    console.clear()
    console.log(this.$router.currentRoute.query)
    if(this.$router.currentRoute.query.from == "gonggao"){
      this.$comment.createPoint({
        tableName: "football",
        moduleName: "竞猜页面从公告来",
        pageName: "/club/footballApply",
        eventName: "load",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    }
  },
  methods: {
    getdangao(score) {
      if (!score) return 0;
      score = Math.floor(score);
      return (score - 3) / 3;
    },
    btnShowMessage(id) {
      this.$refs.showmessage.$emit("show", id);
      this.$comment.createPoint({
        tableName: "football",
        moduleName: "竞猜页面查看信息" + id,
        pageName: "/club/footballApply/message",
        eventName: "load",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    },
    clickScore() {
      this.$refs.board.$emit("show");
      this.$comment.createPoint({
        tableName: "football",
        moduleName: "竞猜页面排行榜",
        pageName: "/club/footballApply/paihang",
        eventName: "load",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    },
    // 编辑赛前预言或赛后点评
    editTextFn(type, status, index, content) {
      // console.log(status)
      this.currentEditContent = content;
      if (type == 1) {
        if (status == -1) {
          if (index == 0) {
            this.editPredictText = true;
            this.currentEditIndex = index;
          } else {
            if (this.raceList[index - 1].status != -1) {
              this.editPredictText = true;
              this.currentEditIndex = index;
            } else {
              this.$message("仅支持在赛前有效时间内进行赛事预言哦！");
            }
          }
        } else {
          if (content === null || content.length == 0) {
            this.$message("仅支持在赛前有效时间内进行赛事预言哦！");
          } else {
            this.editPredictText = true;
            this.currentEditIndex = index;
          }
        }
      } else if (type == 2) {
        if (status === 1) {
          this.editCommentText = true;
          this.currentEditIndex = index;
        } else {
          if (content === null || content.length == 0) {
            this.$message("仅支持在赛后24小时内进行赛后点评哦！");
          } else {
            this.editCommentText = true;
            this.currentEditIndex = index;
          }
        }
      }
    },
    // 取消编辑赛前预言或赛后点评
    cancleEidtTextFn(type, done) {
      console.log(type);
      if (type == 1) {
        if (this.currentEditContent.length > 0) {
          this.raceList[this.currentEditIndex].preMatchComments =
            this.currentEditContent;
        } else {
          this.raceList[this.currentEditIndex].preMatchComments = "";
        }
        this.editPredictText = false;
      } else {
        if (this.currentEditContent.length > 0) {
          this.raceList[this.currentEditIndex].postMatchComments =
            this.currentEditContent;
        } else {
          this.raceList[this.currentEditIndex].postMatchComments = "";
        }
        this.editCommentText = false;
      }
    },
    doEditTextFn(type) {
      if (type == 1) {
        this.editPredictText = false;
      } else {
        this.editCommentText = false;
      }
      this.submitFn()
    },
    // 提交赛事预测信息
    submitFn() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)',
      // })
      let elem = document.getElementById("shake");
      if (elem) {
        elem.classList.add("shake");
        setTimeout(() => {
          elem.classList.remove("shake");
        }, 800);
      }
      let resultArr = [];
      this.submitStatus = true;
      this.raceList.forEach((item, index) => {
        let inputStatus = this.inputStatusFn(item, index);
        if (
          !inputStatus &&
          (item.projectedBlueScore === null ||
            item.projectedBlueScore === "" ||
            item.projectedRedScore === "" ||
            item.projectedRedScore === null)
        ) {
          this.submitStatus = false;
          this.$message("请完整填写预测比分！");
        } else {
          resultArr.push({
            redTeam: item.redTeam,
            blueTeam: item.blueTeam,
            projectedRedScore: item.projectedRedScore,
            projectedBlueScore: item.projectedBlueScore,
            preMatchComments: item.preMatchComments,
            postMatchComments: item.postMatchComments,
            matchId: item.matchId,
            best_pre_prediction: item.before,
            best_after_comments: item.after,
          });
        }
      });
      if (this.submitStatus) {
        submitRaceInfo({ projectedList: resultArr })
          .then((res) => {
            if (res.code === 0) {
              this.$message({
                message: "您的赛事预测数据已成功提交！",
                type: "success",
              });
            } else {
              this.$message({
                message: "提交失败！",
                type: "error",
              });
            }
          })
          .catch((err) => {
            this.$message({
              message: "提交失败！",
              type: "error",
            });
          });
      }

      this.$comment.createPoint({
        tableName: "football",
        moduleName: "竞猜页面",
        pageName: "/club/footballApply",
        eventName: "点击提交预测",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    },
    // 获取赛程
    getRaceListFn() {
      getRaceList().then((res) => {
        console.log("赛程：", res);
        if (res.code === 0) {
          res.data &&
            res.data.forEach((item, index) => {
              let obj = {};
              obj.time = item.match_time.substr(0, 16);
              obj.redTeam = item.red_team;
              obj.blueTeam = item.blue_team;
              obj.matchId = item.id;
              obj.status = item.status;
              obj.projectedRedScore = null;
              obj.projectedBlueScore = null;
              obj.preMatchComments = "";
              obj.postMatchComments = "";
              obj.hostImg = require("../../../assets/football/" +
                item.red_team +
                ".jpg");
              obj.guestImg = require("../../../assets/football/" +
                item.blue_team +
                ".jpg");

              obj.hostScore = item.red_score != null ? item.red_score : "--";
              obj.guestScore = item.blue_score != null ? item.blue_score : "--";

              this.raceList.push(obj);
            });
          this.getRaceInfoFn();
        }
      });
    },
    // 获取个人预测信息
    getRaceInfoFn() {
      getRaceInfo().then((res) => {
        console.log("个人预测信息：", res);
        if (res.code == 0) {
          res.data &&
            res.data.forEach((item, index) => {
              this.raceList[index].projectedRedScore = item.projected_red_score;
              this.raceList[index].projectedBlueScore =
                item.projected_blue_score;
              this.raceList[index].preMatchComments = item.pre_match_comments;
              this.raceList[index].postMatchComments = item.post_match_comments;
              this.raceList[index].before = item.best_pre_prediction;
              this.raceList[index].after = item.best_after_comments;
            });
          this.countPersonScore();
        }
      });
    },
    countPersonScore() {
      this.raceList.forEach((item, index) => {
        let score = this.getCurrentRaceScore(
          item.projectedRedScore,
          item.projectedBlueScore,
          item.hostScore,
          item.guestScore,
          item.before,
          item.after
        );
        this.raceList[index]["score"] = score;
        this.personTotalScore += score;
      });
    },
    getCurrentRaceScore(left, right, leftTotal, rightTotal, before, after) {
      // console.log(left,right,leftTotal,rightTotal,before,after)
      let score = 0;
      if(leftTotal == "--" && rightTotal == "--"){
        return score;
      }
      if (
        (left > right && leftTotal > rightTotal) ||
        (left < right && leftTotal < rightTotal) ||
        (left === right && leftTotal === rightTotal)
      ) {
        //胜负关系猜对得三分
        score += left !== null ? 3 : 0;
      }
      if (left === leftTotal && right === rightTotal) {
        //比分一样得三分
        score += 3;
      }
      if (before == 1) {
        score += 3;
      }
      if (after == 1) {
        score += 3;
      }
      return score;
    },
    itemStatusFn(item, index) {
      if (
        (index == 0 && item.status == -1) ||
        (index != 0 &&
          item.status == -1 &&
          this.raceList[index - 1].status != -1)
      ) {
        return "race-item race-item-active";
      } else {
        return "race-item out-of-date";
      }
    },
    inputStatusFn(item, index) {
      if (
        (index == 0 && item.status == -1) ||
        (index != 0 &&
          item.status == -1 &&
          this.raceList[index - 1].status != -1)
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style lang="stylus">
.predict-point {
  .el-input {
    width: 47px !important;
  }

  .el-input__inner {
    padding: 0 5px !important;
    width: 100% !important;
    text-align: center;
  }
}
</style>
<style  lang='stylus' scoped>
@keyframes fireText {
  0% {
    text-shadow: 0 0 4px white, 0 -3px 2px #ff3, 2px -7px 4px #fd3, -2px -12px 8px #f80, 2px -15px 18px #f20;
  }

  25% {
    text-shadow: 0 0 4px white, 2px -5px 4px #ff3, 2px -9px 6px #fd3, -3px -17px 8px #f80, 4px -20px 22px #f20;
  }

  50% {
    text-shadow: 0 0 4px white, 2px -8px 6px #ff3, 2px -11px 8px #fd3, -4px -22px 8px #f80, 4px -35px 25px #f20;
  }

  75% {
    text-shadow: 0 0 4px white, 2px -5px 4px #ff3, 2px -9px 6px #fd3, -3px -17px 8px #f80, 4px -20px 22px #f20;
  }

  100% {
    text-shadow: 0 0 4px white, 0 -3px 2px #ff3, 2px -7px 4px #fd3, -2px -12px 8px #f80, 2px -15px 18px #f20;
  }
}

.main {
  width: 100%;
  height: 100%;
  // background-image: url('../../../assets/login_bg.svg');
  // padding: 40px 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;

  .weight {
    font-weight: bolder;
    letter-spacing: 2px;
  }

  .bg-img {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  // padding-bottom: 0;
  .page-title {
    position: relative;

    .title {
      font-size: 40px;
      text-align: center;
      font-family: '微软雅黑';
      font-weight: bold;
      color: red;
      margin-top: 20px;
      margin-bottom: 15px;
      animation: fireText 2s infinite;
    }

    .button {
      position: absolute;
      right: 76px;
      top: 0;
      height: 46px;
      line-height: 46px;

      .jifen {
        height: 30px;
        display: inline-block;
      }

      .dalishenbei {
        // margin-left: 50px;
        height: 30px;
        display: inline-block;
        cursor: pointer;
        // position absolute
      }

      .total-btn {
        margin-left: 5px;
        cursor: pointer;
        color: red;
        font-weight: bolder;
      }

      .total-btn:hover {
        border-bottom: 1px solid red;
        color: red;
        font-weight: bolder;
      }
    }
  }

  .race-card {
    padding: 5px 60px 0;
    width: 100%;
    height: 83%;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 1px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.3);
      border-radius: 10px;
      // width 2px
      // height 2px
    }

    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    .race-item:hover {
      border-radius: 8px;
      transform: scale(1.05);
      background-color: rgba(0, 255, 0, 0.2) !important;
    }

    .race-item-active {
      border-radius: 8px;
      // transform: scale(1.05);
      padding: 30px 40px !important;

      .race-time {
        // font-size: 18px !important;
        font-weight: bolder !important;
      }
    }

    .out-of-date {
      // opacity: 0.5;
      background-color: rgba(0, 0, 0, 0.3) !important;

      // color:white
      .race-time {
        color: black !important;
        opacity: 0.6;
      }
    }

    .race-item {
      width: 100%;
      min-width: 1300px;
      // max-width:1000px
      height: 50px;
      padding: 10px 40px;
      font-size: 16px;
      background-color: lightgoldenrodyellow;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 0 5px 1px #999;
      margin-bottom: 20px;
      transition: all 0.3s;
      position: relative;

      .out-of-date-box {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        background-color: rgba(90, 90, 90 0.5);
        text-align: left;
        line-height: 50px;
        color: white;
        font-weight: 600;
        font-size: 18px;
        padding-left: 20px;
      }

      .race-order {
        max-width: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 18px;

        .race-time {
          font-size: 16px;
          color: red;
          font-weight: bolder;
        }
      }

      .vs {
        width: 20px;
        margin: 0px;
      }

      .country {
        // margin: 0 15px;
        display: flex;
        min-width: 450px;
        display: flex;
        justify-content: center;

        .hostTeam, .guestTeam {
          display: flex;
          align-items: center;
          justify-content: center;
          // margin: 0 10px;
          min-width: 65px;
        }

        .ourTeam {
          color: red;
          font-size: 18px;
          font-weight: bolder;
        }

        .guestTeam {
          color: black;
        }

        .flag {
          display: flex;
          align-items: center;

          .host-img, .guest-img {
            width: 50px;
            background-color: #ccc;
            margin: 0 10px;
            box-shadow: 0 0 5px 1px #999;
          }
        }
      }

      .line {
        width: 1px;
        height: 20px;
        background-color: white;
        margin: 0 5px;
      }

      .result {
        // margin: 0 15px;
        // display: flex;
        min-width: 50px;
        font-size: 18px;
        font-weight: bolder;

        .hostScore, .guestScore {
          // margin: 0 10px;
        }

        .hostScore {
          // margin-left: 20px;
        }

        .ourScore {
          color: red;
        }

        .guestScore {
        }
      }

      .predict-point {
        // margin: 0 15px;
        display: flex;
        align-items: center;

        // min-width: 210px;
        .hostPoint, .guestPoint {
          margin: 0 10px;
        }

        .hostPoint {
          margin-left: 10px;
        }

        .guestPoint {
          color: blue;
        }
      }

      .message {
        width: 25px;
        cursor: pointer;
      }

      .message:hover {
        width: 28px;
      }

      .dg-div {
        position: absolute;
        right: -10px;
        top: -5px;

        .dangao {
          width: 15px;
          margin-right: 5px;
        }
      }

      .score-div {
        text-align: center;

        .score {
          color: red;
          font-weight: bolder;
          font-size: 20px;
        }
      }

      .comment {
        // margin: 0 15px;
        display: flex;
        align-items: center;
        font-size: 16px;

        span {
          margin: 0px;
          cursor: pointer;
          min-width: 80px;
          text-align: center;
        }

        span:hover {
          font-size: 18px;
          color: blue;
        }
      }
    }
  }

  .submit-btns {
    // margin-top: 20px;
    display: flex;
    justify-content: center;

    .shake {
      animation: shake 800ms ease-in-out;
    }

    @keyframes shake {
      /* 垂直抖动 */
      10%, 90% {
        transform: rotate(70deg) scale(0.8);
      }

      20%, 80% {
        transform: rotate(140deg) scale(0.6);
      }

      30%, 70% {
        transform: rotate(210deg) scale(0.4);
      }

      40%, 60% {
        transform: rotate(280deg) scale(0.2);
      }

      50% {
        transform: rotate(360deg) scale(0);
      }
    }

    .football-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: #000 0px 0px 10px;
      cursor: pointer;
      transition: all 0.3s;

      img {
        width: 50px;
        height: 50px;
        animation: zhuandong 20s infinite linear;
      }

      @keyframes zhuandong {
        0% {
          transform: rotate(0deg);
        }

        50% {
          transform: rotate(720deg);
        }

        100% {
          transform: rotate(1440deg);
        }
      }
    }

    .football-icon:hover {
      box-shadow: red 0px 0px 10px;
      transform: scale(1.1);
    }
  }
}
</style>

<style lang="stylus">
.el-input-number {
  width: 80px;
}

.el-input {
  width: 40px;
}
</style>
